<!DOCTYPE html> 
<html> 
	<head> 
	<title>Rightsize Demo</title> 	
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="css/rightsize2.min.css" />
   	<link rel="stylesheet" href="css/main.css" />
	<link rel="stylesheet" href="css/jquery.mobile.structure-1.0rc2.min.css" /> 

	<script type="text/javascript" charset="utf-8" src="js/phonegap-1.1.0.js"></script>
    <script type="text/javascript" src="js/jquery-1.6.4.js"></script> 
 	<script type="text/javascript" src="js/jquery.mobile-1.0rc2.min.js"></script>

    	
	<script type="text/javascript" src="js/barcodescanner.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
	<script type="text/javascript" src="js/load-json.js"></script>


	<script>
		function onBodyLoad() {		
			onDeviceReady(1);
			alert(output);
		}
	</script>
    
</head> 

<body onload="onBodyLoad()">
    
    <div data-role="page" id="seite1" data-title="Profil">

        
         <div data-role="header" data-position="inline">
            <a href="#seite2" data-role="button" data-icon="plus" data-iconpos="notext"></a>
            <h1>Profil</h1>
            <a href="index.html" data-icon="check" data-theme="a">Speichern</a>
        </div>
        
        <div class="ui-body ui-body-a">
            <div data-role="content">	

                 <div role="contentinfo" data-theme="c" class="ui-bar " style="margin-top: 10px;">
                    <label for="name" style="margin-left:0px;">Name:</label>
                    <div class="ui-block-a" style="margin-left:90px; width:200px; margin-top: -30px;">
                        <input type="text" name="name" id="name" value=""  />
                    </div>	    
                 </div>           
                 
                  <div role="contentinfo" data-theme="b" class="ui-bar " >
                    <label for="name" style="margin-left:0px;margin-top:10px;">Geschlecht:</label>
                    <div class="ui-block-a" style="margin-left:90px; width:200px; margin-top: -30px;">
                         <select name="geschlecht" id="cbgeschlecht" data-theme="b" data-icon="arrow-d" data-inline="true" >
                            <option value="maennlich">M&auml;nnlich</option>
                            <option value="weiblich">Weiblich</option>
                        </select>
                    </div>	    
                 </div>      
                
               <a href="#" data-role="button" data-icon="arrow-r" style="margin-top: 6px; width:260px; margin-left:-9px;" onclick="scanCode();"> automatisch Berechnen</a> 

                <div data-role="collapsible-set" data-theme="b" data-content-theme="b">
                    <div id=output[1]></div>
					
                    <div data-role="collapsible">
                        <h3>
                        	K&ouml;rperh&ouml;he
                        	<div style="text-align:right; margin-top: -20px">
                        		178cm
                        	</div>
                        </h3>
                        <a href="#seite2" data-role="button" data-icon="info" data-iconpos="notext" style="margin-top: 6px;"></a> 
                        <div  style="margin-left:38px; margin-top: -37px; width:200px">
                             <input type="number" name="groesse" id="groesse" value="" data-inline="true" />
                        </div>  
                    </div>
                    <div data-role="collapsible" >
                        <h3>Beininnenl&auml;nge
                        <div style="text-align:right; margin-top: -20px">
                        -
                        </div>
                        </h3>
                        <a href="#seite2" data-role="button" data-icon="info" data-iconpos="notext" style="margin-top: 6px;"></a> 
                        <div  style="margin-left:38px; margin-top: -37px; width:200px">
                                  <input type="number" name="beininnenlaenge" id="beininnenlaenge" value="" data-inline="true" />
                        </div>  
                    </div>
                    <div data-role="collapsible">
                        <h3>Brustumfang
                        <div style="text-align:right; margin-top: -20px">
                        -
                        </div>                        
                        </h3>
                        <a href="#seite2" data-role="button" data-icon="info" data-iconpos="notext" style="margin-top: 6px;"></a> 
                        <div  style="margin-left:38px; margin-top: -37px; width:200px">
                                  <input type="number" name="brustumfang" id="brustumfang" value="" data-inline="true" />
                        </div>  
                    </div>
                    <div data-role="collapsible">
                        <h3>Unterbrustumfang
                        <div style="text-align:right; margin-top: -20px">
                        -
                        </div>                        
                        </h3>                        
                        <a href="#seite2" data-role="button" data-icon="info" data-iconpos="notext" style="margin-top: 6px;"></a> 
                        <div  style="margin-left:38px; margin-top: -37px; width:200px">
                                  <input type="number" name="unterbrustumfang" id="unterbrustumfang" value="" data-inline="true" />
                        </div>  
                    </div>    
                    <div data-role="collapsible">
                        <h3>Taillenumfang
                        <div style="text-align:right; margin-top: -20px">
                        -
                        </div>                        
                        </h3>                        
                        <a href="#seite2" data-role="button" data-icon="info" data-iconpos="notext" style="margin-top: 6px;"></a> 
                        <div  style="margin-left:38px; margin-top: -37px; width:200px">
                                  <input type="number" name="taillenumfang" id="taillenumfang" value="" data-inline="true" />
                        </div>  
                    </div>
                    <div data-role="collapsible">
                        <h3>H&uuml;ftumfang
                        <div style="text-align:right; margin-top: -20px">
                        -
                        </div>                        
                        </h3>                             
                            <a href="#seite2" data-role="button" data-icon="info" data-iconpos="notext" style="margin-top: 6px;"></a> 
                            <div  style="margin-left:38px; margin-top: -37px; width:200px">
                                      <input type="number" name="hueftumfang" id="hueftumfang" value="" data-inline="true" />
                            </div>  
                    </div> 
                    <div data-role="collapsible">
                        <h3>Fu&szlig;l&auml;nge
                        <div style="text-align:right; margin-top: -20px">
                        -
                        </div>                        
                        </h3>                             
                            <a href="#seite2" data-role="button" data-icon="info" data-iconpos="notext" style="margin-top: 6px;"></a> 
                            <div  style="margin-left:38px; margin-top: -37px; width:200px">
                                      <input type="number" name="fussinnenlaenge" id="fussinnenlaenge" value="" data-inline="true" />
                            </div>  
                    </div> 
                     <div data-role="collapsible">
                        <h3>Handumfange
                        <div style="text-align:right; margin-top: -20px">
                        -
                        </div>                        
                        </h3>                             
                            <a href="#seite2" data-role="button" data-icon="info" data-iconpos="notext" style="margin-top: 6px;"></a> 
                            <div  style="margin-left:33px; margin-top: -37px; width:200px">
                                      <input type="number" name="handumfang" id="handumfang" value="" data-inline="true" />
                            </div>  
                    </div> 
                </div><!-- /content-a -->
            </div><!-- /body-a -->
        </div>
	<div data-role="footer" data-id="foo1" data-position="fixed">
		<div data-role="navbar">
			<ul>
				<li><a href="footer-persist-a.html" class="ui-btn-active ui-state-persist" onclick="scanCode();">Scannen</a></li>
				<li><a href="footer-persist-b.html">Favoriten</a></li>
				<li><a href="footer-persist-c.html">Profil</a></li>
			</ul>

		</div><!-- /navbar -->
	</div><!-- /footer -->
    </div><!-- /page1-a -->
    
    <div data-role="page" id="seite2" data-title="Wie messe ich richtig?">
    <div data-role="header" data-position="inline">
        <a href="#seite1" data-role="button" data-direction="reverse" data-icon="arrow-l" style="margin-top: 5px">Zur&uuml;ck</a> 
        <h1 style="margin-top: 12px;text-align:center;margin-bottom:20px">Wie messe ich richtig?</h1>

    </div>    
    <div data-role="content">	
      Hier sollte jetzt ein Bild mit der dazugeÃ¶rigen ErklÃ¤rung erscheinen
    </div>
    <div data-role="footer" class="ui-bar">
      <div data-role="controlgroup" data-type="horizontal">
        <a href="#seite1" data-icon="info" data-transition="fade" data-role="button" style="width:100px">Scannen</a>
        <a href="#seite2" data-icon="info" data-transition="flip" data-role="button" style="width:100px">Favoriten</a>
        <a href="#seite2" data-icon="info" data-transition="flip" data-role="button" style="width:100px">Profil</a>
      </div>
    </div>
</div><!-- /page1-b -->
	
</body>
</html>
